<template>
	<view class="peak-valley-tariff-setting">
		<site-basic-cell :name="siteName"></site-basic-cell>
		<up-cell-group class="setting-form" :border="false">
			<up-cell :title="$t('peak.valley.tariff.setting.cell-1')">
				<template #value>
					<up-input v-model="formData.fee3" border="none" type="digit" inputAlign="right"
						:placeholder="$t('peak.valley.tariff.setting.cell-1.placeholder')"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('peak.valley.tariff.setting.cell-2')">
				<template #value>
					<up-input v-model="formData.fee2" border="none" type="digit" inputAlign="right"
						:placeholder="$t('peak.valley.tariff.setting.cell-2.placeholder')"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('peak.valley.tariff.setting.cell-3')">
				<template #value>
					<up-input v-model="formData.fee1" border="none" type="digit" inputAlign="right"
						:placeholder="$t('peak.valley.tariff.setting.cell-3.placeholder')"></up-input>
				</template>
			</up-cell>

			<up-cell :title="$t('peak.valley.tariff.setting.cell-4')">
				<template #value>
					<up-input v-model="formData.fee4" border="none" type="digit" inputAlign="right"
						:placeholder="$t('peak.valley.tariff.setting.cell-4.placeholder')"></up-input>
				</template>
			</up-cell>

			<up-cell :title="$t('peak.valley.tariff.setting.cell-5')">
				<template #value>
					<up-input v-model="formData.fee5" border="none" type="digit" inputAlign="right"
						:placeholder="$t('peak.valley.tariff.setting.cell-5.placeholder')"></up-input>
				</template>
			</up-cell>
		</up-cell-group>

		<publish-footer :before-publish="beforePublish" @publish="handlePublish"></publish-footer>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		selectFeeConfig,
		setFeeConfig
	} from "../../apis/components/siteSet";
	import {
		useI18n
	} from "vue-i18n";

	const {
		t
	} = useI18n();

	const siteName = ref(null);
	const siteId = ref(null);
	const formData = reactive({
		fee1: "",
		fee2: "",
		fee3: "",
		fee4: "",
		fee5: "",
		siteId: ""
	})

	onLoad(({
		name,
		id
	}) => {
		siteName.value = name;
		siteId.value = id;
	})

	const verifyFields = () => {
		if (!formData.fee3) {
			return t('peak.valley.tariff.setting.cell-1.placeholder');
		} else if (!formData.fee2) {
			return t('peak.valley.tariff.setting.cell-2.placeholder');
		} else if (!formData.fee1) {
			return t('peak.valley.tariff.setting.cell-3.placeholder');
		} else if (!formData.fee4) {
			return t('peak.valley.tariff.setting.cell-4.placeholder')
		} else if (!formData.fee5) {
			return t('peak.valley.tariff.setting.cell-5.placeholder')
		}
		return null;
	}
	const beforePublish = () => {
		const message = verifyFields();
		if (message) {
			uni.$u.toast(message)
			return false;
		}
		return true;
	}
	const handlePublish = async () => {
		try {
			formData.siteId = siteId.value;
			await setFeeConfig(formData);
			uni.navigateBack()
			uni.$u.toast(t('site.parameter.settings.publish.successful'))
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message)
		}
	}
	
	const loadData = async () => {
		const {data} = await selectFeeConfig(siteId.value);
		Object.keys(data || {}).forEach(key => {
			if(key !== 'siteId'){
				formData[key] = data[key] || "";
			}
		})
	}
	
	watch(() => siteId.value, now => {
		if (now) {
			loadData();
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.peak-valley-tariff-setting {
		padding: 24rpx 32rpx;

		.setting-form {
			margin-top: 24rpx;
		}
	}
</style>